<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/mytag.jspf"%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>预约信息</title>
<script src="assets/js/iscrollEvent.js"></script>
<style>
    html,
    body{
      height: 100%;
    }
</style>
<script type="text/javascript">
var app = new EventsList(null, {
	api : '${ctx}/weixin/employee/myAppointPage',
	//isClick: true,
	params : {
		page : 1,
		no_record :'您当前还没有预约哦'
	}
}, initData);
app.init();

document.addEventListener('touchmove', function(e) {
	e.preventDefault();
}, false);

var temp = $.trim($("#temp").html());

function initData(data, type, $list) {
	if (data.rows) {
		$.each(data.rows, function(i, item) {
			var date = new Date(item.appointmentTime.replace(/-/g, "/"));
			var strDate = date.format("M月d日 EEE - HH:mm");
			var stateName = "未处理";
			if (item.state == "10A")
				stateName = "已接受";
			else if (item.state == "10X")
				stateName = "已退回";
			var div = $(Comm.format(temp, item.appointmentId,strDate,
					item.vipName,item.serviceItemNames));
			$ul = div.find('.btn-ul');
			if (stateName == "未处理") {
				$ul.append("<li class='am-padding-xs'><button class='accept-btn am-btn am-btn-landiao am-btn-block am-radius' type='button'>接受</button></li>");
				$ul.append("<li class='am-padding-xs'><button class='back-btn am-btn am-btn-landiao am-btn-block am-radius' type='button'>退回</button></li>");
			}else{
				$ul.append("<li class='am-padding-xs'><button class='am-btn-default am-btn am-btn-block am-radius' type='button' disabled='disabled'>"+stateName+"</button></li>");
			}
			div.find(".am-icon-angle-right").click(function(){
				window.location.href="${ctx}/weixin/employee/vipDetail/"+item.vipId;
			});
			div.appendTo($list);
		});
	}
}
var $modal = $('#send-back-modal');
$("#record-list").on("click", ".back-btn", function() {
	var appointId = $(this).parents(".am-panel-landiao").data("id");
	$modal.find("#appointId").val(appointId);
	$modal.modal();
});
$("#record-list").on("click", ".accept-btn", function() {
	var appointId = $(this).parents(".am-panel-landiao").data("id");
	var data = "appointId="+appointId+"&state=10A";
	$.ajax({
		type : 'POST',
        url: "${ctx}/weixin/employee/appointSave",
        dataType: "json",
        data:data,
        success: function (data) {
        	Comm.msg(data.msg);
            if (data.success) {
            	window.location.href="${ctx}/weixin/employee/myAppoint";
            }
        },
        error: function () {
        	Comm.msg("提交失败");
        }
    });
});
$("#sub-btn").on("click",function(){
	var appointId = $modal.find("#appointId").val();
	var reason = $modal.find("#reason").val();
	var data = "appointId="+appointId+"&state=10X";
	if(reason){
		data=data+"&reason="+reason;
	}else{
		Comm.msg("请输入退回说明");
		return;
	}
	$.ajax({
		type : 'POST',
        url: "${ctx}/weixin/employee/appointSave",
        dataType: "json",
        data:data,
        success: function (data) {
        	Comm.msg(data.msg);
            if (data.success) {
            	window.location.href="${ctx}/weixin/employee/myAppoint";
            }
            $modal.modal('close');
        },
        error: function () {
        	Comm.msg("提交失败");
        	$modal.modal('close');
        }
    });
});
</script>
</head>
<body>
	<div id="wrapper" data-am-widget="list_news"
		class="am-list-news am-list-news-default">
		<div class="am-list-news-bd">
			<div class="pull-action loading" id="pull-down">
				<span class="am-icon-arrow-down pull-label" id="pull-down-label">
					下拉刷新</span> <span class="am-icon-spinner am-icon-spin"></span>
			</div>
			<div class="am-list am-g" id="record-list">
				<div class="am-list-item-text">正在加载内容...</div>
			</div>
			<div class="pull-action" id="pull-up">
				<span class="am-icon-arrow-down pull-label" id="pull-up-label">
					上拉加载更多</span> <span class="am-icon-spinner am-icon-spin"></span>
			</div>
		</div>
	</div>
	<div style="display: none" id="temp">
		<div class="am-u-sm-12 am-padding-vertical-sm">
			<div class="am-panel am-panel-landiao" data-id="{0}">
				<div class="am-panel-hd am-text-bold am-text-left">预约时间：{1}</div>
				<div class="am-panel-bd am-padding-0">
					<ul class="am-list am-list-static am-margin-0">
						<li>&nbsp;&nbsp;顾客：{2}<button class="am-fr am-text-blue am-btn-link am-padding-right-sm"><span class="am-icon-angle-right"></span></button></li>
						<li>&nbsp;&nbsp;预约项目：{3}</li>
						<li><ul class="am-avg-sm-2 btn-ul">
							
						</ul></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="am-modal am-modal-landiao" tabindex="-1" id="send-back-modal">
		<div class="am-modal-dialog">
		<input id="appointId" name="appointId" type="hidden"></input>
			<div class="am-modal-hd am-text-left">退回预约 </div>
			<div class="am-modal-bd am-text-left am-padding-0">
				<form>
					<ul class="am-list am-list-static am-margin-0">
						<li class="am-padding-0">
							<textarea id="reason" class="app-full-width am-border-0" rows="3" placeholder="请输入退回说明" maxlength="50"></textarea>
						</li>
						<li class="am-text-center">
							<button id="sub-btn" class="am-btn am-btn-landiao am-radius am-padding-horizontal-lg" type="button">提交</button>
						</li>
					</ul>
				</form>
			</div>
		</div>
	</div>
</body>
</html>
